<template>
  <div class="house-Of-concern component ui-user-center actWrap">
    <!-- <div class="nodata" v-show="nodata"><span class="vp-top">无关注房源</span></div> -->
    <nodata v-show="noData"></nodata>
    <swipeout class="wrap" ref="wrap">
        <swipeout-item transition-mode="follow" v-for="(item, index) in dataList" :key="index">
            <div slot="right-menu">
                <swipeout-button @click.native="cancleConcern(item.id)" type="warn"><x-icon type="ios-close-outline" size="30"></x-icon>删除</swipeout-button>
            </div>
            <div slot="content" v-show="!noData" class="ui-house-li vux-1px-b" >
              <!-- <div class="status">{{status2txt(item.status)  || ''}}</div> -->
                <house-list v-if="item" :houseInfo="item" titleOneline="true" :detailPath="item.detailPath" :showPublishTime="false" twoLable="true">
                  <!-- :detailPath="'/apartmentDetail'" -->
                    <!-- <x-button slot="BTaction" @click.native="cancleConcern(item.id)" class="theme-bt bt-c concern__cancel" mini>取消关注</x-button> -->
                </house-list>
            </div>
        </swipeout-item>
    </swipeout>
      <!-- <mugen-scroll :handler="getDatas" :should-handle="hasMoreData" :threshold="1" scroll-container="wrap">
        <p class="load-more-data">正在加载更多数据...</p>
        <load-more :tip="'正在加载'"></load-more>
      </mugen-scroll> -->
  </div>
</template>
<script>
import houseList from '@/components/houseList'
import MugenScroll from 'vue-mugen-scroll'
import { LoadMore, Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'
export default {
  name: 'houseOfConcern',
  components: {
    houseList,
    MugenScroll,
    LoadMore,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton
  },
  data () {
    return {
      noData: false,
      loading: false,
      hasMoreData: true,
      dataList: [],
      page: 1
    }
  },
  created () {
    // this.dataList = this.testData
    this.getDatas()
  },
  methods: {
    getDatas () {
      this.loading = true
      // this.$axiosPosting(this.$api.myFollowHouseForRenter, {page: this.page, pageSize: 2}).then(res => {
      this.$axiosPosting(this.$api.myFollowHouseForRenter, { page: '1', pageSize: '1000' }).then(res => {
        if (res.code === '0000') {
          this.loading = false
          if (!res.data || res.data === '' || res.data.length <= 0) {
            this.noData = true
            this.hasMoreData = false
          } else {
            this.noData = false
            ++this.page
            res.data.map(item => {
              item.houseTitle = item.name
              item.rentalPrice = item.betNum
              item.id = item.houseId
              item.detailPath = item.type === 1 ? '/detail' : '/apartmentDetail'
              return item
            })
            this.dataList.push(...res.data)
            // console.log(this.dataList)
          }
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    // 房屋状态  1000可出租 1001不可租 1002租赁中 1003已预定 1111待审核
    status2txt (status) {
      if (status === 1000) return '审核通过'
      else if (status === 1111) return '待审核'
      else if (status === 1001) return '不可租'
      else if (status === 1002) return '租赁中'
      else if (status === 1003) return '已预定'
      else if (status === 1004) return '已下架'
      else return ''
    },
    cancleConcern (houseId) {
      let data = {houseId}
      console.log(data)
      this.$axiosPosting(this.$api.cancleConcernHouse, data).then(res => {
        if (res.code === '0000') {
          this.$vux.toast.text('取消关注房源成功')
          this.getDatas()
        } else {
          this.$vux.toast.text('取消关注房源失败')
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .vux-swipeout-button-warn {
    background-color: #c44c51;
  }
  .vux-x-icon {
    fill: #fff;
    display: block;
    margin: 0 auto;
  }
  .status {
    position: absolute;
    right: 20px;
    top: 10px;

  }
</style>
<style lang="less">
  .house-Of-concern {
    .ui-house-li {
      border-bottom: 1px solid #F3F3F3;
      .two-lable {
        display: none;
      }
    }
    .vux-swipeout-button-box {
      top: -1px;
      bottom: 1px;
    }
    .wrap {
      // height: 100vh;
      // overflow: auto;
    }
    .vp-top {
      display: block;
      padding-top: 100vh;
    }
    .bt-c {
      bottom: 0;
      // padding: 0 12px;
      color: #504b4b;
      border-color: #999;
      border-radius: 2px;
    }
    .concern__cancel {
      bottom: -1px;
    }
  }
  @media screen and (max-width: 360px) {
    .house-Of-concern {
      .label {
        span:nth-child(2), span:nth-child(3) {
          display: none !important;
        }
      }
    }
  }
  
</style>
